{% extends "base.html" %}

{% block title %}GoodAI标书 - 首页{% endblock %}

{% block extra_css %}
<style>
    .sidebar {
        height: calc(100vh - 72px);
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
    }
    .content {
        height: calc(100vh - 72px);
        overflow-y: auto;
    }
    .editor-container {
        height: calc(100vh - 120px);
        margin-top: 10px;
    }
    .editor {
        height: 100%;
        resize: none;
    }
    .outline-container {
        height: calc(100vh - 180px);
        display: flex;
        flex-direction: column;
    }
    .outline-editor {
        flex: 1;
        resize: none;
        font-family: monospace;
    }
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-2 sidebar py-3">
        <h5 class="mb-3">功能导航</h5>
        <div class="nav flex-column nav-pills">
            <button class="nav-link active mb-2" id="welcome-tab" data-bs-toggle="pill" data-bs-target="#welcome">欢迎</button>
            <button class="nav-link mb-2" id="input-tab" data-bs-toggle="pill" data-bs-target="#input">一 需求文档</button>
            <button class="nav-link mb-2" id="outline-tab" data-bs-toggle="pill" data-bs-target="#outline">二 大纲生成</button>
            <button class="nav-link mb-2" id="document-tab" data-bs-toggle="pill" data-bs-target="#document">三 终稿生成</button>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="col-md-10 content py-3">
        <div id="status" class="alert alert-info d-none"></div>
        
        <div class="tab-content">
            <!-- 欢迎页 -->
            <div class="tab-pane fade show active" id="welcome">
                <div class="container py-4">
                    <h2 class="text-center mb-4">欢迎使用 GoodAI 标书生成器</h2>
                    
                    <div class="card mb-4">
                        <div class="card-body">
                            <p>主页：<a href="https://100agents.feishu.cn/wiki/QhO2wlMr0i0AVJkvk8OcxI3Hnxe">https://100agents.feishu.cn/wiki/QhO2wlMr0i0AVJkvk8OcxI3Hnxe</a></p>
                            <p>GoodAI 标书生成器，一个基于 AI 的自动化标书生成工具，作者古德白。一次可以生成20万字的专业标书技术方案。已支持DeepSeek接入，开源免费使用。已打包好exe可执行文件，欢迎下载使用。不懂技术不会配置API的，等下版我会出一版内置AI的，开箱即用。</p>
                            <h4>更新说明</h4>
                            <ul>
                                <li>2025-03-19 更新说明：配置页加了API测试按钮，保存前先测试。遇到问题先看控制台输出的提示信息，已统一翻译为中文。</li>
                                <li>2025-03-19 更新说明：终稿文档页面新增导出为Word(docx)功能，可直接将生成的文档导出为Word格式。</li>
                            </ul>

                            <h4>使用流程</h4>
                            <ol>
                                <li>在"需求文档"页面填写技术需求和评分标准</li>
                                <li>切换到"大纲生成"页面，点击生成大纲</li>
                                <li>确认大纲无误后，切换到"终稿生成"页面生成完整文档</li>
                                <li>可以将生成的文档导出为Word格式</li>
                            </ol>

                            <h4>注意事项</h4>
                            <ul>
                                <li>使用前请确保已正确配置API密钥</li>
                                <li>每一步操作前请确保前序步骤已完成</li>
                                <li>文档生成可能需要较长时间，请耐心等待</li>
                                <li>建议定期保存已编辑的内容</li>
                            </ul>
                        </div>
                    </div>

                    <div class="text-center">
                        <h4 class="mb-3">联系作者</h4>
                        <img src="res/baihuaagent.jpg" alt="作者二维码" style="max-width: 200px;" class="img-fluid">
                    </div>
                </div>
            </div>
            
            <!-- 需求输入与生成页面 -->
            <div class="tab-pane fade" id="input">
                <button class="btn btn-primary mb-3" id="save-btn">保存</button>
                <div class="row editor-container">
                    <div class="col-md-6">
                        <label for="tech-editor" class="form-label">技术需求 (tech.md)</label>
                        <textarea class="form-control editor" id="tech-editor"></textarea>
                    </div>
                    <div class="col-md-6">
                        <label for="score-editor" class="form-label">评分标准 (score.md)</label>
                        <textarea class="form-control editor" id="score-editor"></textarea>
                    </div>
                </div>
            </div>

            <!-- 大纲查看页面 -->
            <div class="tab-pane fade" id="outline">
                <div class="outline-container">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-success" id="generate-outline-btn">生成大纲</button>
                        <button class="btn btn-primary" id="save-outline-btn">保存大纲</button>
                    </div>
                    <p>生成大纲前，确保第一步中的技术需求和评分标准已经填写完成。</p>
                    <textarea id="outline-content" class="form-control outline-editor"></textarea>
                </div>
            </div>

            <!-- 文档查看页面 -->
            <div class="tab-pane fade" id="document">
                <div class="mb-3">
                    <div class="btn-group mb-3">
                        <button class="btn btn-info" id="generate-doc-btn">生成文档</button>
                        <button class="btn btn-success" id="export-docx-btn">导出为Word</button>
                    </div>
                    <p>生成文档前，确保第二步大纲已经生成，生成时间和大纲中的章节数量有关，生成时间较长，完成后刷新本页可以看到最新内容。</p>
                    <div id="document-content" class="border p-3 bg-light"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- 添加html-docx-js库 -->
<script src="https://cdn.jsdelivr.net/npm/html-docx-js/dist/html-docx.min.js"></script>
<script>
    // 工具函数：显示状态信息
    function showStatus(message, type = 'info') {
        const status = document.getElementById('status');
        status.className = `alert alert-${type}`;
        status.textContent = message;
        status.classList.remove('d-none');
        setTimeout(() => status.classList.add('d-none'), 3000);
    }

    // API 调用函数
    async function callApi(endpoint, method = 'GET', data = null) {
        try {
            const options = {
                method,
                headers: {
                    'Content-Type': 'application/json',
                }
            };
            if (data) {
                options.body = JSON.stringify(data);
            }
            const response = await fetch(`${endpoint}`, options);
            const result = await response.json();
            if (result.code === 1) {
                throw new Error(result.message);
            }
            return result;
        } catch (error) {
            showStatus(error.message, 'danger');
            throw error;
        }
    }

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 加载已保存的输入
        async function loadInput() {
            try {
                const result = await callApi('/show_input');
                document.getElementById('tech-editor').value = result.data.tech_md;
                document.getElementById('score-editor').value = result.data.score_md;
            } catch (error) {
                console.error('加载输入失败:', error);
            }
        }
        loadInput();

        // 保存按钮
        document.getElementById('save-btn').addEventListener('click', async () => {
            try {
                const techContent = document.getElementById('tech-editor').value;
                const scoreContent = document.getElementById('score-editor').value;
                await callApi('/save_input', 'POST', {
                    tech_md: techContent,
                    score_md: scoreContent
                });
                showStatus('保存成功', 'success');
            } catch (error) {
                console.error('保存失败:', error);
            }
        });

        // 生成大纲按钮
        document.getElementById('generate-outline-btn').addEventListener('click', async () => {
            try {
                showStatus('正在生成大纲...', 'info');
                await callApi('/generate_outline', 'POST');
                showStatus('大纲生成成功', 'success');
                await refreshOutline();
            } catch (error) {
                console.error('生成大纲失败:', error);
            }
        });

        // 生成文档按钮
        document.getElementById('generate-doc-btn').addEventListener('click', async () => {
            try {
                showStatus('正在生成文档...', 'info');
                await callApi('/generate_document', 'POST');
                showStatus('文档生成成功', 'success');
                await refreshDocument();
            } catch (error) {
                console.error('生成文档失败:', error);
            }
        });

        // 导出为Word文档按钮
        document.getElementById('export-docx-btn').addEventListener('click', async () => {
            try {
                showStatus('正在准备导出...', 'info');
                
                // 获取文档内容
                const result = await callApi('/show_document');
                if (!result.data) {
                    throw new Error('没有可导出的文档内容');
                }
                
                // 将Markdown转换为HTML
                const htmlContent = marked.parse(result.data);
                
                // 添加基本样式
                const styledHtml = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>技术方案</title>
                        <style>
                            body { font-family: 'SimSun', serif; font-size: 12pt; line-height: 1.5; }
                            h1 { font-size: 18pt; font-weight: bold; margin-top: 24pt; margin-bottom: 6pt; }
                            h2 { font-size: 16pt; font-weight: bold; margin-top: 18pt; margin-bottom: 6pt; }
                            h3 { font-size: 14pt; font-weight: bold; margin-top: 14pt; margin-bottom: 6pt; }
                            p { margin-bottom: 10pt; }
                        </style>
                    </head>
                    <body>
                        ${htmlContent}
                    </body>
                    </html>
                `;
                
                // 转换HTML为docx
                const converted = htmlDocx.asBlob(styledHtml);
                
                // 创建下载链接
                const url = URL.createObjectURL(converted);
                const a = document.createElement('a');
                a.href = url;
                a.download = '技术方案.docx';
                document.body.appendChild(a);
                a.click();
                
                // 清理
                setTimeout(() => {
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }, 0);
                
                showStatus('导出成功', 'success');
            } catch (error) {
                console.error('导出Word文档失败:', error);
                showStatus('导出失败: ' + error.message, 'danger');
            }
        });

        // 刷新大纲
        async function refreshOutline() {
            try {
                const result = await callApi('/show_outline');
                document.getElementById('outline-content').value = JSON.stringify(result.data, null, 2);
            } catch (error) {
                showStatus('获取大纲失败：' + error.message, 'danger');
            }
        }

        // 保存大纲
        async function saveOutline() {
            try {
                const outlineContent = document.getElementById('outline-content').value;
                let outlineData;
                try {
                    outlineData = JSON.parse(outlineContent);
                } catch (e) {
                    throw new Error('大纲格式不正确，请确保是有效的JSON格式');
                }

                await callApi('/api/save_outline', 'POST', outlineData);
                showStatus('大纲保存成功', 'success');
            } catch (error) {
                showStatus('保存大纲失败：' + error.message, 'danger');
            }
        }

        // 刷新文档
        async function refreshDocument() {
            try {
                const result = await callApi('/show_document');
                const documentContent = document.getElementById('document-content');
                documentContent.innerHTML = marked.parse(result.data);
            } catch (error) {
                console.error('刷新文档失败:', error);
                showStatus('刷新文档失败: ' + error.message, 'danger');
            }
        }

        // 添加标签页切换事件监听
        document.getElementById('outline-tab').addEventListener('click', refreshOutline);
        document.getElementById('document-tab').addEventListener('click', refreshDocument);

        // 添加大纲保存按钮事件监听
        document.getElementById('save-outline-btn').addEventListener('click', saveOutline);
    });
</script>
{% endblock %}
